<!-- https://blog.csdn.net/hope_It/article/details/103266053 -->
<!-- 开发： webpack-dev-serve dev.js -->
<!-- 生产： webpack pro.js https://www.cnblogs.com/vickylinj/p/14290180.html-->
<template>
  <mark-display :markdown="markdown" @title="setTitle" keyboard-ctrl url-hash-ctrl auto-font-size auto-blank-target></mark-display>
</template>

<script>
	let baseUrl="http://172.16.0.155:8077/"
import MarkDisplay from "vue-mark-display";
const markdown = `###### boss技改

<pre>
<code>
    methods:{
      resizeScreen(){
        console.log('resize')
      }
    },
    mounted() {
      window.addEventListener('resize',this.resizeScreen)
    },
    beforeDestroy() {
      window.removeEventListener('resize',this.resizeScreen)
    }
</code>
</pre>

----
<pre>
1.为什么会要技改
2.怎么改，改的过程遇到了那些问题，怎么解决
3.关键配置说明，为什么要这样
4.目前结果是怎样的
5.目前还遗留了那些问题
</pre>

----

<h6>为什么会要技改?</h6>

----

<p>1.线上环境 以开发方式进行部署，存在性能问题 </p>
<img src="http://172.16.0.155:8077/boss/微信截图_20211117150411.png"/>

----

<p>2.首屏打开下载静态资源大，无效代码过多</p>
<img src="http://172.16.0.155:8077/boss/微信截图_20211117162404.png"/>

----

<p>3.主框架配置，部分核心配置错误，且部分配置未生效</p>
<img src="http://172.16.0.155:8077/boss/微信截图_20211117163633.png"/>

----

<p>4.webpack版本过低，打包速度过慢等 欢迎补充</p>
<img src="http://172.16.0.155:8077/boss/image2021-10-15_13-45-11.png"/>

----

<h6>怎么改?</h6>

<p>套娃，即使用vuecli创建个项目然后把boss src目录代码迁入</p>

<p>然后安装相关依赖 比较要注意的是依赖的版本问题 比如创建vue 2.6.10;但是boss用了新的vue api；需要升级 </p>

<p>还有的是一些loader版本也升级了 比如vue-loader </p>

----

###### 改的过程遇到了那些问题，怎么解决?
<pre>
1.不认识 /deep/  
原因 node-sass迁移到sass不兼容
解决：用 ::v-deep替换

2.Failed to mount component: template or render function not defined.   
原因vue-loader版本过高需要指明加载的是vue文件
解决：在路由 module.exports = file => require('@/views/' + file + '.vue').default  
其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件

3.加入.env环境文件 
需要全局调用环境变量配置
BASE_API修改为this.$globalConfig.baseUrl.VUE_APP_BASE_API；
TEST_URL改为this.$globalConfig.baseUrl.VUE_APP_TEST_URL；
解决：增加配置文件，进行全局调用

4.正式接口允许跨域访问；测试接口出现跨域

5.build后出现z-tree字体覆盖问题
解决：找到覆盖的样式 进行注释字体

6.近期下载的依赖包中 elementui 升级到了2.15.2；出现了表格样式不能覆盖的问题
解决：注释掉多个页面重复定义的样式，并给表格加权

7.。。。。。。。。。。。。。
</pre>

----

###### 17号上线出现的样式问题
<pre>
1.由于某些页面有全局样式覆盖代码，所以编译打包成一个css文件；导致出现了覆盖

2.解决方案，查找哪些页面 拥有全局样式的 添加scoped
</pre>

----

<img src="http://172.16.0.155:8077/boss/微信截图_20211119095423.png"/>

----

<img src="http://172.16.0.155:8077/boss/微信截图_20211118140621.png"/>

----

###### 关键配置说明，为什么要这样?
<pre>
1.能使用外部扩展的，尽量使用；比如JQ

2.生产时去掉了 console 市面有几个 babel的用起来速度快点
--terser-webpack-plugin一般需要45秒；而transform-remove-console一般要25-30秒

3.modual包 分为两个打出来 一般不更新；所以可以利用浏览器缓存 每次变化只是app

4.去掉了无效大内存页面 比如大屏页面有10M

5.去掉了无效的模块 比如国际化

6.vuecli默认优化了点：
   压缩代码
   代码分割
   按需加载
   
7.。。。。。。。。。。。。。。。。。。。。。。。。
</pre>

----

<img src="http://172.16.0.155:8077/boss/微信截图_20211118150240.png"/>

----

###### 目前结果是怎样的?
<pre>
1.整体框架是实现了

2.某些页面还需要处理，页面内存在某些全局变量或者样式覆盖的问题

3.现在线上是把dist目录部署在了nginx

4.现在页面加载，渲染速度加快了

</pre>

----

<img src="http://172.16.0.155:8077/boss/微信截图_20211118004938.png"/>

----

###### 还有哪些遗留问题？
<pre>
1.以前某些老旧代码的不规范，错误，或者些全局污染的变量等问题 存在隐患

2.路由问题：路由还没能实现懒加载或者异步组件加载；原因路由表设计很不规范

3.外部扩展问题：特别是elementui组件库和echarts；不能cdn引入；原因某些页面重重引入组件库

4.。。。。。。。。。。。。。。。。。。。。。

</pre>

----

<img src="http://172.16.0.155:8077/boss/微信截图_20211118153819.png"/>

----

<img src="http://172.16.0.155:8077/boss/微信截图_20211118153234.png"/>

----

<img src="http://172.16.0.155:8077/boss/微信截图_20211118153427.png"/>

----

###### 总结
<pre>革命尚未成功，同志们仍须努力</pre>

`


export default {
  components: { MarkDisplay },
  data() {
    return { markdown};
  },
  methods: {
    setTitle({ title }) {
      document.title = title;
    },
  }
};
</script>

<style>
body {
  margin: 0;
  overflow: hidden;
}
p{
	margin: 15px 0;
	font-size: 30px;
	text-align: left;
	width: 90%;
}
p img{
	margin: 0 auto;
	display: block;
}
h1,h2,h3,h4,h5,h6{
	margin: 25px 0;
}
img{
	max-width: 100%;
}
pre{
	text-align: left;
	font-size: 30px;
}
</style>